<template>
  <div>
    <el-container>
      <el-header>
        <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="审批人">
          <el-container><el-input v-model="form.input" placeholder="输入框"></el-input>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-container>
        </el-form-item>
        </el-form>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
                <el-menu-item index="1-1">分类管理</el-menu-item>
                <el-menu-item index="1-2">商品发布</el-menu-item>
              <el-menu-item index="1-2">商品审核</el-menu-item>
              <el-menu-item index="1-2">订单管理</el-menu-item>
              <el-menu-item index="1-2">财务报表</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="姓名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="form.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="生日">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="活动区域">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="即时配送">
              <el-switch v-model="form.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质">
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
      <el-footer>页脚</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Rk526View',
  data () {
    return {
      form: {
        input: '',
        name: '',
        sex: '',
        date1: '',
        delivery: '',
        type: ''
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    }
  }
}
</script>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 240px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 440px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 360px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
